<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>2017运势预测</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">

    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <link type="text/css" rel="stylesheet" href="./css/lib/mobiscroll.my.v2.16.0.min.css">
    <script>
        (function(maxWidth, originSize){
            var width = document.documentElement.clientWidth;
            var Standard = originSize / (maxWidth * 1.0 / width);
            Standard = Standard > 100 ? 100 : Standard;
            document.querySelector("html").style.fontSize = Standard + "px";
        })(750, 100);
    </script>
</head>
<body>
<div class="header">
    <div class="clearfix">
        <div class="back"><a href="javascript:history.back();"></a></div>
        <div class="my_order"><span></span></div>
    </div>
</div>

<div class="main">
    <div class="name bg_input"><input type="text" id="name" value="您的姓名"></div>
    <div class="gender bg_input"><input type="button" id="gender" value="性别 : 男"></div>
    <div class="birth bg_input"><input type="text" id="date" value="出生日期" /></div>

    <div class="my_lucky"></div>
    <span class="prompt_msg"></span>

</div>


<!-- <script src="js/test.js"></script> -->
<script type="text/javascript" src="js/lib/zepto.fastclick.doT.layer.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./js/lib/mobiscroll.my.v2.16.0.min.js"></script>
<script>
    $(function(){
        FastClick.attach(document.body);
        if (typeof Stars == "undefined") {
            var Stars = {};
        }
        Stars.test = {
            variable: {
                placeholder: $('#name').prop('placeholder'), //占位符
                gender: '',		    //性别
                name: '',			//输入的名字
                date:''             //记录出生日期
            },
            init: function(){
                var that = this;
                //返回该页面时保存输入的出生日期
                that.variable.date = window.sessionStorage.getItem( 'birthday');
                if( that.variable.date ){
                    $('#date').val( that.variable.date );
                }
                that.bindEvent();
            },
            requestPara: function (paras) {
                //获取url参数
                var url = location.href;
                url = decodeURI(url);
                var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
                var paraObj = {};
                for (var i = 0; j = paraString[i]; i++) {
                    paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
                }
                var returnValue = paraObj[paras.toLowerCase()];
                if (typeof(returnValue) == "undefined") {
                    return "";
                } else {
                    return returnValue;
                }
            },
            bindEvent: function (){
                var that = this;
                //输入姓名交互
                $('#name').focus(function() {
                    var tmpName = $('#name').val();
                    if( tmpName == '您的姓名' ){
                        $(this).val('');
                    }
                });
                $('#name').blur(function() {
                    var tmpName = $('#name').val();
                    if( tmpName == '' || tmpName.trim() == '' ){
                        $(this).val('您的姓名');
                    }
                });
                //切换性别
                $('#gender').click(function() {
                    var gender = $(this).val();
                    if( gender == "性别 : 男" ){
                        $(this).val("性别 : 女");
                    }else{
                        $(this).val("性别 : 男");
                    }
                });
                //选择出生年月
                $('#date').mobiscroll().datetime({
                    animate: 'flip',
                    rows: 5,
                    height: 30,
                    maxWidth: 55,
                    minWidth: 50,
                    theme: 'android-holo-light',
                    mode:  'scroller',
                    display: 'modal',
                    lang:  'zh',
                    minDate:  new Date(1910,1,1),
                    maxDate: new Date(),
                    // stepMinute: 2,
                    dateFormat: 'yy年mm月dd日',
                    dateOrder: 'yymmdd',
                    defaultValue: new Date(1990, 7, 8, 8, 0)
                });
                //点击测试
                $('.my_lucky').click(function () {
                    var name = $('#name').val();
                    var isfanti = that.requestPara('isfanti');
                    var user_id = that.requestPara('user_id');
                    var auth_code = that.requestPara('auth_code');
                    if( name == '您的姓名' ){
                        $('.prompt_msg').html('请输入姓名');
                        setTimeout(function () {
                            $('.prompt_msg').html('');
                        },2000);
                        return;
                    }
                    var gender = $('#gender').val().slice(-1);
                    date = $('#date').val();
                    if( date == '出生日期' ){
                        $('.prompt_msg').html('请选择出生日期');
                        setTimeout(function () {
                            $('.prompt_msg').html('');
                        },2000);
                        return;
                    }
                    var arrTime = that.separateTime( date );
                    var projectUrl = that.getProjectUrl('index.html', 'result2017.html');
                    window.sessionStorage.setItem( 'birthday', date);
                    window.location = projectUrl + '?name=' + name +'&gender=' + gender +'&date=' + arrTime.join('|')+'&user_id='+user_id +'&isfanti='+isfanti +'&auth_code='+auth_code;
                });
                //购买记录
                $('.my_order span').click(function () {
                    var user_id = that.requestPara('user_id');
                    var auth_code = that.requestPara('auth_code');
                    var projectUrl = that.getProjectUrl('index.html', 'buy_record.html');
                    window.location = projectUrl + '?type=11'+'&user_id=' + user_id +'&auth_code=' + auth_code;
                });
            },
            //获取到当前文件的项目路径，fileName:当前页面文件名
            getProjectUrl: function ( oldFileName, newFileName ) {
                var protocol = window.location.protocol;
                var host = window.location.host;
                var pathname = window.location.pathname;
                pathname = pathname.replace( oldFileName, '');
                var projectUrl = protocol + '//' + host + pathname + newFileName;
                return projectUrl;
            },
            //从时间中分离年月日时分  '1996年12月11日 10:02'
            separateTime: function ( str ) {
                var arrTime = [];
                var arr = str.trim().split('年');
                arrTime.push( arr[0]-0 );
                arr = arr[1].trim().split('月');
                arrTime.push( arr[0]-0 );
                arr = arr[1].trim().split('日');
                arrTime.push( arr[0]-0 );
                arr = arr[1].trim().split(':');
                arrTime.push( arr[0]-0 );
                arrTime.push( arr[1]-0 );
                return arrTime;
            }


        };
        Stars.test.init();


    });
</script>

</body>
</html>